<template>
	<view class="float-form">

	</view>
	
	<uni-fab :pattern="pattern" :content="content"
		horizontal="left" vertical="bottom" direction="horizontal" @trigger="trigger"></uni-fab>
		
	
	<uni-popup ref="DriverPopup" type="bottom" :mask-click="false">
		<view class="publishPopup">
			<view class="popHeader">
				<view class=""></view>
				<view class="title">发布行程：寻找乘客</view>
				<view class="close" @click="clickPublishClose">
					<uni-icons type="closeempty" size="28" color="#999"></uni-icons>
				</view>
			</view>
			<scroll-view scroll-y>
				<view class="content">
					<uni-forms ref="form" class="forms" :modelValue="tripInfo" label-position="top" :rules="rules">
						<uni-forms-item class="laber" name="tripType" label="行程类型" required>
							<uni-data-checkbox v-model="tripInfo.tripType" :localdata="tripTypes" />
						</uni-forms-item>
						<uni-forms-item label="起点:" name="startLc" required>
							<uni-easyinput v-model="tripInfo.startLc" placeholder="请输入起点,不超过6个字" maxlength="6"/>
						</uni-forms-item>
						<uni-forms-item label="终点:" name="endLc" required>
							<uni-easyinput v-model="tripInfo.endLc" placeholder="请输入终点,不超过6个字" maxlength="6" />
						</uni-forms-item>
						<uni-forms-item label="出发时间:" name="timeRange" required>
							<uni-datetime-picker type="datetimerange" return-type="timestamp" v-model="tripInfo.timeRange"/>
						</uni-forms-item>
						<uni-forms-item label="途经点:" name="passBy" >
							<uni-data-checkbox v-model="tripInfo.passBys" multiple :localdata="passBys" />
						</uni-forms-item>
						<uni-forms-item label="给ta捎句话:" name="sendMsgs" >
							<uni-data-checkbox v-model="tripInfo.sendMsgs" multiple :localdata="driverMsgTags" />
						</uni-forms-item>
					</uni-forms>
					<view class="copyRight">
						温馨提醒：<br>
						·请车主开启通过手机号加微信好友的功能，乘客确认同行后，将会通过手机号添加您的微信；<br>
						·每位用户仅支持发布两条有效的拼车单，如果超出数量请删除历时的发布拼车信息<br>
					</view>
					<view class="disclaimer">
						<input class="input" type="checkbox" :v-model="agreed" @click="onClickRadio"/>
						<navigator url="/pages/disclaimer/disclaimer">
							<text class="value">《我已阅读并同意免责声明》</text>						
						</navigator>   					
						
					</view>
					<button @click="submitForm" :disabled="!agreed" type="default" size="mini" plain>发布行程</button>
					<view class="bottom"></view>
						
				</view>
			</scroll-view>
		</view>
	</uni-popup>
	
	
	<uni-popup ref="PassengerPopup" type="bottom" :mask-click="false">>
			<view class="publishPopup">
				<view class="popHeader">
					<view class=""></view>
					<view class="title">发布行程：寻找司机</view>
					<view class="close" @click="clickPublishClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="content">
						<uni-forms ref="form" class="forms" :modelValue="tripInfo" label-position="top" :rules="rules">
							<uni-forms-item class="laber" name="tripType" label="行程类型" required>
								<uni-data-checkbox v-model="tripInfo.tripType" :localdata="tripTypes" />
							</uni-forms-item>
							<uni-forms-item label="起点:" name="startLc" required>
								<uni-easyinput v-model="tripInfo.startLc" placeholder="请输入起点,不超过6个字" maxlength="6"/>
							</uni-forms-item>
							<uni-forms-item label="终点:" name="endLc" required>
								<uni-easyinput v-model="tripInfo.endLc" placeholder="请输入终点,不超过6个字" maxlength="6" />
							</uni-forms-item>
							<uni-forms-item label="出发时间:" name="timeRange" required>
								<uni-datetime-picker type="datetimerange" return-type="timestamp" v-model="tripInfo.timeRange"/>
							</uni-forms-item>
							<uni-forms-item label="可上车点:" name="passBy" >
								<uni-data-checkbox v-model="tripInfo.passBys" multiple :localdata="passBys" />
							</uni-forms-item>
							<uni-forms-item label="预计报价:" name="quotation" >
								<uni-number-box v-model="tripInfo.quotation" :min="10" :max="100"/>
							</uni-forms-item>
							<uni-forms-item label="给ta捎句话:" name="sendMsgs" >
								<uni-data-checkbox v-model="tripInfo.sendMsgs" multiple :localdata="passengeTags" />
							</uni-forms-item>
						</uni-forms>
						<view class="copyRight">
							温馨提醒：<br>
							·每位乘客仅支持发布两条有效的拼车单，如果超出数量请删除之前的拼车单<br>
							·请乘客开启通过手机号加微信好友的功能，乘客确认同行后，将会通过手机号添加您的微信；<br>
						</view>
						
						<view class="disclaimer">
							<input class="input" type="checkbox" :v-model="agreed" @click="onClickRadio"/>
							<navigator url="/pages/disclaimer/disclaimer">
								<text class="value">《我已阅读并同意免责声明》</text>						
							</navigator>   					
							
						</view>
						<button @click="submitForm" :disabled="!agreed" type="default" size="mini" plain>发布行程</button>
						<view class="bottom"></view>						
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	
		
		
</template>

<script setup>
import { ref } from 'vue';
import {DriverTags, PassengeTags, ReferPrice, PassByTags} from "@/common/js/common-const.js"
	
const DriverPopup = ref(null)	// 点击发布行程
const PassengerPopup = ref(null)	
const BaseTagsDict = ref([])		// 用于映射tags的字典
const publishType = ref(null)		// 悬浮按钮行程发布类型
const agreed = ref(false)		// 免责按钮
const form = ref()
const rules = ref({
	tripType: {
		rules: [{
			required: true,
			errorMessage: '行程类型不能为空'
		}]
	},
	startLc: {
		rules: [{
			required: true,
			errorMessage: '起点不能为空'
		}]
	},
	endLc: {
		rules: [{
			required: true,
			errorMessage: '终点不能为空'
		}]
	},
	timeRange: {
		rules: [{
			required: true,
			errorMessage: '出发时间不能为空'
		}]
	}
})


const db = uniCloud.database()


// -------------- 表单 --------------
const tripInfo = ref({
	startLc: "",			// 起点
	endLc: "",				// 终点
	timeRange: [],			// 出行时间范围
	tripType: 0,			// 行程类型
	publishType: 0,			// 发布人类型
	passBys: [],				// 途径地点
	
});

// 行程类型
const tripTypes = ref([
	{ value: 0, text: "上班" },
	{ value: 1, text: "下班" },
]);

// 途径点
const passBys = ref(PassByTags);
// 车主给乘客留言
const driverMsgTags = ref(DriverTags);

// 乘客给车主留言
const passengeTags = ref(PassengeTags);

// 
const startBetween = ref([
	{ value: 0, text: "不晚于出发时间" },
	{ value: 10*6000, text: "前后10分钟" },
	{ value: 15*6000, text: "前后15小时" },
])

// 提交表单
const submitForm = async function(){
	try{
		form.value.validate().then((res)=>{
		})
		uni.showLoading({
			title:"正在发布中...",
		})
		
		let earliestTs = 0;
		let lastestTs = 0;
		let curPassBys = [];
		let curSendMsgs = [];
		
		if(tripInfo.value.timeRange.length === 2){
			earliestTs = tripInfo.value.timeRange[0];
			lastestTs = tripInfo.value.timeRange[1];
		}
		if(tripInfo.value.timeRange.passBys !== 0){
			curPassBys = tripInfo.value.passBys;
		}
		if(tripInfo.value.timeRange.sendMsgs !== 0){
			curSendMsgs = tripInfo.value.sendMsgs;
		}

		let res = await db.collection('trip')
			.add({
				uid:"1001",
				startLc: tripInfo.value.startLc,
				endLc: tripInfo.value.endLc,
				earliestTs: earliestTs,
				lastestTs: lastestTs,
				publishType: tripInfo.value.publishType,
				tripType: tripInfo.value.tripType,
				passBys: curPassBys,
				sendMsgs: curSendMsgs
			})
		if(res.result.errCode === 0){
			setTimeout(() => {
			  uni.showToast({
			    title: "行程发布成功"
			  });
			}, 1500); // 延迟1500毫秒（1.5秒）
		}

	}catch(err){
		uni.showModal({
			content:"输入有误，请检查必填项",
			showCancel:false
		})
	}finally{
		uni.hideLoading();
	}
	
}

	
	
// -------------- 悬浮按钮 --------------
const content = ref(
	[{
			iconPath: '/static/images/publish-car-active.png',			
			selectedIconPath: '/static/images/publish-car-active.png',
			text: '我是司机',
			active: false
		},
		{
			iconPath: '/static/images/publish-user-active.png',
			selectedIconPath: '/static/images/publish-user-active.png',
			text: '我是乘客',
			active: false
		}
	]
)	
const pattern = ref({
	color: '#7A7E83',
	backgroundColor: '#fff',
	selectedColor: '#32CD99',
	buttonColor: '#32CD99',
	iconColor: '#fff',

})


// 点击悬浮按钮，获取用户选项
const trigger = function(res){
	tripInfo.value.publishType = res.index;
	if(res.index === 0){
		DriverPopup.value.open();	// 拉起寻找乘客的窗口
		BaseTagsDict.value = DriverTags;
	}else if(res.index === 1){
		PassengerPopup.value.open();// 拉起寻找车主的窗口
		BaseTagsDict.value = PassengeTags
	}
}

// 点击关闭按钮
const clickPublishClose = function(){
	agreed.value = false;
	if(tripInfo.value.publishType === 0){
		DriverPopup.value.close();
	}else if(tripInfo.value.publishType === 1){
		PassengerPopup.value.close();
	}
}

// -------------- 免责声明 --------------
// 点击免责按钮
const onClickRadio = function(e){
	agreed.value = !agreed.value;
}

</script>

<style lang="scss" scoped>
.float-form{
	position: fixed;
	right: 50rpx;
	// bottom: 160rpx;
	// 隔开安全区域
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 200;
	.item{
		width: 90rpx;
		height: 90rpx;
		background: rgba(255,255,255,0.5);
		border-radius: 50%;
		margin-bottom: 20rpx;
		// 居中
		display: flex;
		align-items: center;
		justify-content: center;
		
		// 增加边框
		border: 1px solid #eee;
	}

}
	
.popHeader{		// 从infoPupop提取到外层，便于评分弹窗共用样式
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title{
		color: $text-font-color-2;
		font-size: 40rpx;
		font-weight: 400;
	}
	.close{
		padding: 6rpx;
	}
}	

.publishPopup{
	background:
	linear-gradient(to bottom, transparent, #fff 400rpx),
	linear-gradient(to right, #A8DADC 40%, #FADADD);
	padding: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	
	scroll-view{
		max-height: 60vh;
		padding-bottom: 80rpx;
		.content{
			.forms{
				.label{
					  font-size: 88px; /* 设置字体大小 */
					  color: #333; /* 字体颜色 */
					  font-weight: bold; /* 字体加粗 */
				}
			}
			
			.disclaimer{
				display: flex;
				navigator{
					.input{
						padding-left: 0rpx;
					}
					.value{
						color: blue;
					}
				}
			}
			
			.copyRight{
				font-size: 28rpx;
				padding: 20rpx;
				background: #f6f6f6;
				color:  $text-font-color-3;
				border-radius: 20rpx 0;
				margin: 20rpx 0;
				line-height: 1.6em;
			}	
			.submit-button {
				background-color: $brand-theme-color; /* 按钮背景色 */
			    // color: white; /* 按钮文字颜色 */
			    border: none; /* 去掉默认边框 */
			    border-radius: 5px; /* 圆角 */
			    padding: 10px 20px; /* 内边距，纵向10px，横向20px */
			    font-size: 16px; /* 字体大小 */
			    width: 120px; /* 按钮宽度 */
			    height: 60px; /* 按钮高度 */
			    tline-height: 50px; /* 行高设置为按钮高度，以实现上下居中 */
		        transition: background-color 0.3s; /* 背景色过渡效果 */
			    text-align: center; /* 文本水平居中 */
				
	
			}
			button{
				background: $brand-theme-color;
				border: none;
				font-size: 20px; /* 设置字体大小 */
				transition: transform 0.1s ease, box-shadow 0.1s ease; /* 添加过渡效果 */
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60%;
			}
			button:active {
			    transform: scale(0.85); /* 按下时缩小 */
			    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
			}
			.bottom{
				height: 40rpx;
			}
		}
	}
		
}

</style>